<template>
  <div class="home-entry">
      <div class="container">
        <div class="home-category">
          <ul class="menu">
            <li v-for='item,index in headerlist'   @mouseover="overHandle(index)" >
              <a href="javascript:;">{{item.name}}</a>
              <a v-for='item,index in item.children' v-if="index<2" href="javascript:;"  >{{item.name}}</a>
            </li>
            <li  @mouseover="oversHandle" >
              <a href="javascript:;">品牌</a>
              <a href="javascript:;" >品牌推荐</a>
            </li>
          </ul>
           <div class="layer">
              <h4 v-show='bool'>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul v-show='bool'>
                  <li v-for='item in goodslist' >
                      <a href="">
                          <img :src="item.picture" alt="">
                          <div class="info">
                              <p class="name">{{item.name}}</p>
                              <p class="desc">{{item.desc}}</p>
                              <p class="price"><i>￥</i>{{item.price}}</p>
                          </div>
                      </a>
                  </li>
              </ul>

             <h4 v-show='bool==false'>品牌推荐 <small>根据您的购买或浏览记录推荐</small></h4>
              <ul v-show='bool==false'>
                  <li v-for='item in brandlist' >
                      <a href="">
                          <img :src="item.picture" alt="">
                          <div class="info">
                              <p class="name">{{item.place}}</p>
                              <p class="name">{{item.name}}</p>
                              <p class="desc">{{item.desc}}</p>
                          </div>
                      </a>
                  </li>
              </ul>
           </div>
        </div>
      </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
      return{
          headerlist:[],
          goodslist:[],
          brandlist:[],
          bool:true,
      }
  },
  mounted(){
      var _this = this
      axios({
      url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/home/category/head",
      method: "get",
      
    }) .then(function (res) {
        if (res.data.msg == "操作成功") {
          _this.headerlist = res.data.result
        }
      })
      axios({
      url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/home/brand?limit=6",
      method: "get",
      
    }) .then(function (res) {
        if (res.data.msg == "操作成功") {
          _this.brandlist = res.data.result
        }
      })


  },
  methods:{
      overHandle(index){
          
          this.goodslist = this.headerlist[index].goods
          this.bool=true
      },
      oversHandle(){
          this.bool = false
      }
  }
}
</script>
<style scoped>
.home-entry{
  position: absolute;
  top: 0;
  left: 0;
}
.app-body{
min-height: 600px
}
.home-category{
  width: 250px;
  height: 500px;
  background: rgba(0,0,0,.8);
  position: relative;
  z-index: 99;
}
.menu{
width: 250px;
}
.menu li{
  padding-left: 40px;
  height: 50px;
  line-height: 50px;
}
.menu li a{
font-size: 14px;
margin-right: 4px;
color: #fff;
text-decoration: none;
}
.menu li a:nth-of-type(1){
font-size: 16px;
}
.menu li:hover{
  background: #27ba9b;
}
.home-category:hover .layer{
  display: block;
}
.layer{
  width: 990px;
  height: 500px;
  background: hsla(0,0%,100%,.8);
  position: absolute;
  left: 250px;
  top: 0;
  display: none;
  padding: 0 15px;
}
.layer h4{
  font-size: 20px;
  font-weight: 400;
  line-height: 80px;  
}
.layer h4 small{
  font-size: 16px;
  color: #666;
}
.layer ul{
  display: flex;
  flex-wrap: wrap;
}
.layer ul li{
  width: 310px;
  height: 120px;
  margin-right: 10px;
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}
.layer ul li a:hover{
  background: #e3f9f4;
}
.layer ul li a{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 10px;
}
.layer ul li a img{
  width: 95px;
  height: 95px;
}
.layer ul li a .info{
  padding-left: 10px;
  line-height: 24px;
  width: 190px;
}
.layer ul li a .info .name{
  font-size: 16px;
  color: #666;
}
.layer ul li a .info .desc{
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.layer ul li a .info .price{
  font-size: 22px;
  color: #cf4444;
}
.layer ul li a .info .price i{
  font-size: 16px;
  font-style: normal;
}
</style>